.scroll-wrapper-contact-hero {
  padding: 0;
  height: 100%;

  .scroll-wrapper-inner {
    height: 100%;
    max-width: none;
  }
}

.page-contact-us {
  height: 100%;
}

.contact-us-hero {
  .hero {
    @include page-background-colour(contact);
  }

  .gradient-background-sequence {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

.content-wrapper-contact-new-business {
  .content-wrapper-inner {
    padding-top: 0 !important;
  }

  .also-presence {
    margin-bottom: 50px;
    text-align: center;
  }
}

.content-wrapper-contact-more {
  background: white;

  h4 {
    margin-bottom: 20px;
  }

  p {
    margin-bottom: $title-border-bottom;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.contact-contacts {
  list-style-type: none;
  width: 100%;
  margin: 0 auto;
  padding-top: 0 !important;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  li {
    padding-bottom: 0 !important;
    margin-top: 20px;
    width: 100%;
  }

  @media screen and (min-width: $bp-large) {
    li {
      margin-top: 30px;
    }
  }
}

.contact-contacts-studio {
  margin-bottom: 10px;
}

.contact-contacts-name {
  margin: 0
}

.contact-contacts-title {
  font-style: italic;
}

.contact-contacts-email {
  margin-top: 0;
}

.content-wrapper-contact-jobs {
  @include darkBackground;

  svg {
    width: 109px;
  }

  .contact-jobs-button {
    @include buttonSolid;
    @include page-background-colour(join);
    margin-top: 30px;
  }
}

.content-wrapper-contact-find {
  @include darkBackground;
  background: $nonBlack;
  text-align: center;

  .content-wrapper-inner {
    padding-bottom: 0 !important;
  }
}

.contact-us-hero {
  position: relative;

  .contact-us-paper-plane {
    position: absolute;
    top: 65%;
    left: 70%;

    .trail-wave {
      stroke-width: 10;
    }

    @media screen and (min-width: $bp-small) {
      top: 50%;
      left: 66%;
    }

    @media screen and (min-width: $bp-medium) {
      .trail-wave {
        stroke-width: 18;
      }
    }

    .paper-plane {
      transform: translateZ(100px) translateY(-50%) translateX(-50%);
      transform-origin: 50% 50%;
    }
  }

  .paper-plane-body {
    .right-wing {
      position: relative;

      svg[title="ustwo"] {
        display: none;
        position: absolute;
        bottom: 15px;
        left: 10px;
        fill: #000;
        width: 50px;
        height: 30px;
        transform: rotate(-17deg);

        @media screen and (min-width: $bp-medium) {
          display: block;
        }
      }
    }
  }
}
